<div class="page-container">
  <!-- 页面标题和操作区 -->
  <div class="page-header">
    <div class="header-left">
      <div class="page-title">
        调拨单号：<span class="order-number">{{ allocationData.allocationNo || '-' }}</span>
        <button class="btn-copy" title="复制单号"><i class="fas fa-copy"></i></button>
      </div>
    </div>
    <div class="header-right">
      <button class="btn btn-outline-primary" (click)="editAllocation()">编辑</button>
      <button class="btn btn-outline-danger" (click)="goBack()">删除</button>
      <button class="btn btn-outline-success" (click)="auditAllocation()">审核</button>
      <button class="btn btn-outline-secondary" (click)="copyAllocation()">复制</button>
      <button class="btn btn-outline-secondary" (click)="printAllocation()">打印</button>
    </div>
  </div>
  
  <!-- 加载中状态 -->
  <div *ngIf="loading" class="loading-container">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">加载中...</span>
    </div>
    <div class="mt-2">正在加载数据...</div>
  </div>
  
  <!-- 调拨单详情信息 -->
  <div *ngIf="!loading" class="allocation-detail">
    <!-- 基础信息表格 -->
    <div class="detail-section info-section">
      <div class="info-row">
        <div class="info-item">
          <div class="info-label">制单人</div>
          <div class="info-value">{{ allocationData.singer || '李敏' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">所在部门</div>
          <div class="info-value">采购部门</div>
        </div>
        <div class="info-item">
          <div class="info-label">制单时间</div>
          <div class="info-value">{{ allocationData.creationTime | date:'yyyy-MM-dd HH:mm:ss' }}</div>
        </div>
        <div class="info-item status-item">
          <div class="info-label">单据状态</div>
          <div class="info-value">
            <span class="badge" [ngClass]="getStatusBadgeClass(allocationData.status || '待审核')">
              {{ allocationData.status || '待审核' }}
            </span>
          </div>
        </div>
      </div>
      
      <div class="info-row">
        <div class="info-item">
          <div class="info-label">调拨类型</div>
          <div class="info-value">{{ allocationData.allocationType || '调拨类型' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">调拨申请日期</div>
          <div class="info-value">{{ allocationData.applicationDate | date:'yyyy-MM-dd' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">调出仓库</div>
          <div class="info-value">{{ allocationData.fromWarehouse || '仓库一' }}</div>
        </div>
      </div>
      
      <div class="info-row">
        <div class="info-item">
          <div class="info-label">调入仓库</div>
          <div class="info-value">{{ allocationData.toWarehouse || '仓库三' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">经办人</div>
          <div class="info-value">{{ allocationData.handler || '曹丽' }}</div>
        </div>
      </div>
      
      <div class="info-row full-width">
        <div class="info-item">
          <div class="info-label">备注</div>
          <div class="info-value">{{ allocationData.remarks || '' }}</div>
        </div>
      </div>
    </div>
    
    <!-- 标签页部分 -->
    <ul class="nav nav-tabs custom-tabs" id="allocationTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link" [class.active]="activeTab === 'basic'" (click)="changeTab('basic')">
          其他信息
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" [class.active]="activeTab === 'details'" (click)="changeTab('details')">
          调拨明细
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" [class.active]="activeTab === 'outRecord'" (click)="changeTab('outRecord')">
          出库记录
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" [class.active]="activeTab === 'inRecord'" (click)="changeTab('inRecord')">
          入库记录
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" [class.active]="activeTab === 'operations'" (click)="changeTab('operations')">
          操作记录
        </button>
      </li>
    </ul>
    
    <!-- 标签页内容 -->
    <div class="tab-content mt-3">
      <!-- 其他信息 -->
      <div class="tab-pane fade" [class.show]="activeTab === 'basic'" [class.active]="activeTab === 'basic'">
        <div class="attachment-section">
          <h4>附件</h4>
          <div *ngIf="!attachments || attachments.length === 0" class="no-data text-center">
            <i class="fas fa-inbox me-2"></i>暂无附件
          </div>
          <div *ngIf="attachments && attachments.length > 0" class="attachment-list">
            <div class="attachment-item" *ngFor="let file of attachments">
              <a [href]="file.url" target="_blank" class="attachment-link">
                <span class="attachment-name">{{ file.name }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 调拨明细 -->
      <div class="tab-pane fade" [class.show]="activeTab === 'details'" [class.active]="activeTab === 'details'">
        <div class="table-responsive">
          <table class="table table-bordered table-striped">
            <thead class="table-light">
              <tr>
                <th>序号</th>
                <th>产品名称</th>
                <th>产品编码</th>
                <th>规格型号</th>
                <th>单位</th>
                <th>调出仓库库存</th>
                <th>调入仓库库存</th>
                <th>调拨数量</th>
                <th>单价</th>
                <th>金额</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="!allocationData.details || allocationData.details.length === 0">
                <td colspan="11" class="text-center py-3">暂无调拨明细数据</td>
              </tr>
              <tr *ngFor="let item of allocationData.details || []; let i = index">
                <td>{{ i + 1 }}</td>
                <td>{{ item.productName }}</td>
                <td>{{ item.productCode }}</td>
                <td>{{ item.specification }}</td>
                <td>{{ item.unit }}</td>
                <td>{{ item.fromWarehouseStock }}</td>
                <td>{{ item.toWarehouseStock }}</td>
                <td>{{ item.allocationQuantity }}</td>
                <td>{{ item.unitPrice }}</td>
                <td>{{ item.allocationAmount }}</td>
                <td>{{ item.remarks }}</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="7" class="text-end">总计：</td>
                <td>{{ getTotalQuantity() }}</td>
                <td></td>
                <td>{{ getTotalAmount() }}</td>
                <td></td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
      
      <!-- 出库记录 -->
      <div class="tab-pane fade" [class.show]="activeTab === 'outRecord'" [class.active]="activeTab === 'outRecord'">
        <div *ngIf="!outRecords || outRecords.length === 0" class="no-data">
          <i class="fas fa-inbox me-2"></i>暂无出库记录
        </div>
        <div *ngFor="let record of outRecords" class="warehouse-record-section">
          <div class="record-header">
            <div class="record-info">
              <div class="record-title">
                <span class="record-no">单号：{{ record.recordNo }}</span>
                <span class="record-status badge" [ngClass]="getStatusBadgeClass(record.status)">{{ record.status }}</span>
              </div>
              <div class="record-meta">
                <span class="record-warehouse">仓库：{{ record.warehouseName }}</span>
                <span class="record-date">出库日期：{{ record.recordDate | date:'yyyy-MM-dd HH:mm:ss' }}</span>
                <span class="record-operator">操作员：{{ record.operator }}</span>
              </div>
            </div>
          </div>
          <div class="record-details">
            <div class="table-responsive">
              <table class="table table-bordered table-striped">
                <thead class="table-light">
                  <tr>
                    <th>序号</th>
                    <th>产品名称</th>
                    <th>产品编码</th>
                    <th>规格型号</th>
                    <th>单位</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>金额</th>
                    <th>备注</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let item of record.details; let i = index">
                    <td>{{ i + 1 }}</td>
                    <td>{{ item.productName }}</td>
                    <td>{{ item.productCode }}</td>
                    <td>{{ item.specification }}</td>
                    <td>{{ item.unit }}</td>
                    <td>{{ item.quantity }}</td>
                    <td>{{ item.unitPrice }}</td>
                    <td>{{ item.amount }}</td>
                    <td>{{ item.remarks }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 入库记录 -->
      <div class="tab-pane fade" [class.show]="activeTab === 'inRecord'" [class.active]="activeTab === 'inRecord'">
        <div *ngIf="!inRecords || inRecords.length === 0" class="no-data">
          <i class="fas fa-inbox me-2"></i>暂无入库记录
        </div>
        <div *ngFor="let record of inRecords" class="warehouse-record-section">
          <div class="record-header">
            <div class="record-info">
              <div class="record-title">
                <span class="record-no">单号：{{ record.recordNo }}</span>
                <span class="record-status badge" [ngClass]="getStatusBadgeClass(record.status)">{{ record.status }}</span>
              </div>
              <div class="record-meta">
                <span class="record-warehouse">仓库：{{ record.warehouseName }}</span>
                <span class="record-date">入库日期：{{ record.recordDate | date:'yyyy-MM-dd HH:mm:ss' }}</span>
                <span class="record-operator">操作员：{{ record.operator }}</span>
              </div>
            </div>
          </div>
          <div class="record-details">
            <div class="table-responsive">
              <table class="table table-bordered table-striped">
                <thead class="table-light">
                  <tr>
                    <th>序号</th>
                    <th>产品名称</th>
                    <th>产品编码</th>
                    <th>规格型号</th>
                    <th>单位</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>金额</th>
                    <th>备注</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let item of record.details; let i = index">
                    <td>{{ i + 1 }}</td>
                    <td>{{ item.productName }}</td>
                    <td>{{ item.productCode }}</td>
                    <td>{{ item.specification }}</td>
                    <td>{{ item.unit }}</td>
                    <td>{{ item.quantity }}</td>
                    <td>{{ item.unitPrice }}</td>
                    <td>{{ item.amount }}</td>
                    <td>{{ item.remarks }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 操作记录 -->
      <div class="tab-pane fade" [class.show]="activeTab === 'operations'" [class.active]="activeTab === 'operations'">
        <div class="table-responsive">
          <table class="table table-bordered table-striped">
            <thead class="table-light">
              <tr>
                <th>序号</th>
                <th>操作类型</th>
                <th>操作人</th>
                <th>操作时间</th>
                <th>操作详情</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="!operationLogs || operationLogs.length === 0">
                <td colspan="5" class="text-center py-3">暂无操作记录</td>
              </tr>
              <tr *ngFor="let log of operationLogs; let i = index">
                <td>{{ i + 1 }}</td>
                <td>{{ log.operationType }}</td>
                <td>{{ log.operator }}</td>
                <td>{{ log.operationTime | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                <td>{{ log.details }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 添加底部返回按钮 -->
  <div class="footer-actions">
    <button type="button" class="btn btn-secondary" (click)="goBack()">
      <i class="fas fa-arrow-left"></i> 返回列表
    </button>
  </div>
</div> 